<template>
  <div class="common-search-form-component">
    <a-form :model="queryParams">
      <a-row :gutter="16">
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-form-item :label="t('dict.name')">
            <a-input v-model:value="queryParams.dictName" :placeholder="t('dict.namePlaceholder')" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-form-item :label="t('dict.type')">
            <a-input v-model:value="queryParams.dictType" :placeholder="t('dict.typePlaceholder')" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-form-item :label="t('dict.status')">
            <a-select v-model:value="queryParams.status" :placeholder="t('common.selectStatusPlaceholder')" allow-clear>
              <a-select-option value="0">{{ t('common.enabled') }}</a-select-option>
              <a-select-option value="1">{{ t('common.disabled') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'TypeSearchForm'
})

withDefaults(defineProps<{
  queryParams: {
    dictName?: string
    dictType?: string
    status?: '0' | '1'
  }
}>(), {
  queryParams: () => ({})
})

const { t } = useI18n() 

</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 